<template>
    <el-divider>标签页</el-divider>

    <el-form :model="propJson" label-width="auto" style="width: 100%">
        <el-form-item label="背景颜色">
            <el-color-picker v-model="propJson.backGroundColor" color-format="hex" />
        </el-form-item>

        <el-form-item label="是否为动态标签">
            <el-radio-group v-model="propJson.isDynamic">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>

    <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="!propJson.isDynamic">
        <el-button type="primary" class="addCollapse" size="small" @click="addTabs()">添加标签页</el-button>
    </div>

    <el-collapse v-if="!propJson.isDynamic">
        <el-collapse-item :name="index" v-for="(item, index) in propJson.tabsInfoList">
            <template #title>
                <div class="collapseTitle">
                    <span>标签 {{(index + 1)}}</span>
                    <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteTab(index)">删除</el-button>
                </div>
            </template>
            <el-divider>标签标题</el-divider>

            <CommonThirdServiceValue :actionInfo="item.labelInfo ? item.labelInfo : {}" :commonParam="commonParam" />
            <el-divider>角标配置</el-divider>

            <el-form :model="item" label-width="auto" style="width: 100%">
                <el-form-item label="是否添加角标">
                    <el-radio-group v-model="item.isAddTagInfo" @change="changeAddTageInfo(item)">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-divider v-if="item.isAddTagInfo">角标内容</el-divider>

            <CommonThirdServiceValue v-if="item.isAddTagInfo" :actionInfo="item.tagInfo ? item.tagInfo : {}" :commonParam="commonParam" />
        </el-collapse-item>
    </el-collapse>

    <div v-if="propJson.isDynamic">
        <el-divider>标签页名称列表</el-divider>
        <CommonThirdServiceValue :actionInfo="propJson.dynamicLabelInfo ? propJson.dynamicLabelInfo : {}" :commonParam="commonParam" />
    </div>
</template>

<script name="TabsDrawer" setup lang="ts">
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addTabs() {
    let obj = {
        isAddTagInfo: false,
        tagInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        labelInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        labelContentComponentList: [
            {
                name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                    actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                        apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                }
            }
        ]
    }
    propJson.value.tabsInfoList.push(obj);
}

function deleteTab(index) {
    // 删除数组中的数据
    propJson.value.tabsInfoList.splice(index, 1);
}

function changeAddTageInfo(item) {
    if (item.isAddTagInfo) {
        if (!item.tagInfo) {
            item.tagInfo = {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
        }
    }
}
</script>

<style scoped lang="less">

</style>